<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main">
  
    <article id="post-Webpack基础配置-四" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2021/01/11/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E5%9B%9B/" class="article-date">
  <time class="dt-published" datetime="2021-01-11T14:34:54.000Z" itemprop="datePublished">2021-01-11</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2021/01/11/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E5%9B%9B/">Webpack基础配置(四)</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><ul>
<li>问：本节有哪些loader？<ul>
<li>url-loader、file-loader。</li>
</ul>
</li>
</ul>
<h2 id="url-loader"><a href="#url-loader" class="headerlink" title="url-loader"></a>url-loader</h2><ol>
<li><p>安装<br> <code>yarn add url-loader file-loader --dev</code></p>
<p> 注：url-loader需要<code>依赖file-loader</code>，所以下载url-loader的同时也要下载file-loader。</p>
</li>
<li><p>在webpack.config.js中添加配置  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	test: <span class="regexp">/\.(png|jpg|jpeg|svg|gif)$/</span>,</span><br><span class="line">	use: [</span><br><span class="line">		&#123;</span><br><span class="line">			loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">			options: &#123;</span><br><span class="line">				limit: <span class="number">1028</span> * <span class="number">8</span>,</span><br><span class="line">				name: <span class="string">`assets/imgs/[name].[hash:8].[ext]`</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> <code>limit</code>：文件大小的最大值<br> <code>assets/imgs/</code>：在dist文件夹中生成的目录(目录名称随意)<br> <code>[name]</code>：文件名称<br> <code>[hash:8]</code>：8位的hash值，可用于版本控制<br> <code>[ext]</code>：后缀</p>
<p> 注：如果文件大小低于limit的值(8kb)，则返回base64的dataurl，如果文件大小高于limit的值，则内部使用file-loader根据name属性直接生成文件</p>
</li>
<li><p>测试<br> 在src文件夹下创建<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0a114a84d8e4cbd8c92d2806beba1fc~tplv-k3u1fbpfcp-watermark.image"></p>
<p> <code>less_then_limit.png</code>为大小低于limit的文件<br> <code>more_than_limit.png</code>为大小高于limit的文件  </p>
<p> a. 使用<code>低于limit</code>的文件<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b8e7e8e6ab846e9beb4d6e0d30fdd3d~tplv-k3u1fbpfcp-watermark.image">  </p>
<p> 执行<code>yarn build</code></p>
<p> 生成的代码效果<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60c150a5613e47cd901f170b31f42a67~tplv-k3u1fbpfcp-watermark.image">  </p>
<p> dist文件夹下<code>未生成</code>指定目录(assets/imgs/)与文件<br> <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df87e077643b467bbb71d14019498fba~tplv-k3u1fbpfcp-watermark.image">  </p>
<p> b. 使用<code>高于limit</code>的文件<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4af38bfc13974702ae4757bf70283161~tplv-k3u1fbpfcp-watermark.image">  </p>
<p> 执行<code>yarn build</code></p>
<p> 生成的代码效果<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5a4954251d448bc85329b2921912325~tplv-k3u1fbpfcp-watermark.image"></p>
<p> dist文件夹下<code>生成</code>指定目录(assets/imgs/)与文件<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34e017e99f6f4aa994c7bb2d8c4cfa69~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
</ol>
<h2 id="file-loader"><a href="#file-loader" class="headerlink" title="file-loader"></a>file-loader</h2><p>file-loader与url-loader功能相似，只不过没有limit限制，不生成base64的dataurl，直接生成指定路径的文件  </p>
<ol>
<li><p>安装  </p>
<pre><code> `yarn add file-loader --dev`  </code></pre>
</li>
<li><p>使用<br> a. 字体文件  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	test: <span class="regexp">/\.(woff|woff2|eot|ttf|otf)$/</span>,</span><br><span class="line">	loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">	options: &#123;</span><br><span class="line">		name: <span class="string">`assets/fonts/[name].[hash:8].[ext]`</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> b. 媒体文件  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	test: <span class="regexp">/\.(mp4|ogg)$/</span>,</span><br><span class="line">	loader: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">	options: &#123;</span><br><span class="line">		name: <span class="string">`assets/media/[name].[hash:8].[ext]`</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/01/11/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E5%9B%9B/" data-id="ckjsoehch0003fsr07vsq2btw" data-title="Webpack基础配置(四)" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-Webpack基础配置-三" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%89/" class="article-date">
  <time class="dt-published" datetime="2020-12-20T11:45:23.000Z" itemprop="datePublished">2020-12-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%89/">Webpack基础配置(三)</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><ul>
<li><p>问：为什么使用loader？  </p>
<ul>
<li>webpack自身只能理解js类型的文件，loader可以将所有类型的文件转换为webpack可以处理的<code>有效模块</code>。 </li>
</ul>
</li>
<li><p>问：本节有哪些loader？</p>
<ul>
<li>style-loader、css-loader、less-loader、sass-loader、postcss-loader</li>
</ul>
</li>
</ul>
<h2 id="css-文件"><a href="#css-文件" class="headerlink" title=".css 文件"></a>.css 文件</h2><p><strong><code>css-loader</code></strong> </p>
<ol>
<li><p>下载相关loader<br> <code>yarn add style-loader css-loader --dev</code></p>
</li>
<li><p>webpack.config.js文件中添加规则</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">   &#123;  </span><br><span class="line">     test: <span class="regexp">/\.css$/</span>,  </span><br><span class="line">     use: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">&#125;		</span><br></pre></td></tr></table></figure>
<p> loader的加载顺序为<code>从右至左</code><br> css-loader：将<code>.css文件的内容转化为js字符串</code><br> style-loader：动态创建<code>&lt;style&gt;</code>标签，将转化的字符放入&lt;style&gt;标签中</p>
</li>
<li><p>创建src/css/base.css文件<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bca2c4b390f4823b6a206738c131ca1~tplv-k3u1fbpfcp-watermark.image"><br> base.css文件内容<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7410501f54bd46fb8a2609041fbaa3c8~tplv-k3u1fbpfcp-watermark.image"><br> index.html中添加<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c84453253e4e45eea029fa63c79c491b~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>在入口文件中，引入.css文件<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8df99b0cdeb4e8f9f963fbcd9007e0c~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>执行命令<br> yarn build</p>
</li>
<li><p>页面效果<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f540e4471725481e9136521c745db58b~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
</ol>
<h2 id="处理-less文件"><a href="#处理-less文件" class="headerlink" title="处理.less文件"></a>处理.less文件</h2><p><strong><code>less-loader</code></strong></p>
<ol>
<li><p>下载相关loader<br> <code>yarn add style-loader css-loader --dev</code><br> <code>yarn add less-loader less --dev</code>  </p>
<blockquote>
<p><code>注：less为转换.less文件命令</code></p>
</blockquote>
</li>
<li><p>webpack.config.js文件中添加规则</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">  use: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>, <span class="string">&#x27;less-loader&#x27;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> loader的加载顺序为<code>从右至左</code><br> less-loader：将<code>.less文件转换为.css文件</code><br> css-loader：将<code>.css文件的内容转化为js字符串</code><br> style-loader：动态创建<code>&lt;style&gt;</code>标签，将转化的字符放入&lt;style&gt;标签中</p>
</li>
<li><p>创建src/less/base.less文件<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76f1b62d490041efadbe81bff047af5e~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>在入口文件中，引入.less文件<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67f217a66880484cb0c4ef6a93746c50~tplv-k3u1fbpfcp-watermark.image"><br> less文件内容<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/224dd269b7994ccfa5ae976e55306d16~tplv-k3u1fbpfcp-watermark.image"><br> index.html中添加<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8f19544a4ad4231a8c430cb5ccea6a0~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>执行命令<br> yarn build</p>
</li>
<li><p>页面效果<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9139fb82e8894cdfa5e790545ba0b74f~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
</ol>
<h2 id="处理-scss-sass文件"><a href="#处理-scss-sass文件" class="headerlink" title="处理.scss/.sass文件"></a>处理.scss/.sass文件</h2><p><strong><code>sass-loader</code></strong></p>
<ol>
<li><p>下载相关loader<br> <code>yarn add style-loader css-loader --dev</code><br> <code>yarn add sass-loader node-sass --dev</code></p>
<blockquote>
<p><code>注：node-sass为转换.scss/.sass文件命令</code><br><code>注：如果node-sass安装失败，则执行 yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g</code></p>
</blockquote>
</li>
<li><p>webpack.config.js文件中添加规则</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  test: <span class="regexp">/\.s(a|c)ss$/</span>,</span><br><span class="line">  use: [<span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span>, <span class="string">&#x27;sass-loader&#x27;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> loader的加载顺序为<code>从右至左</code><br> sass-loader：将<code>.scss/.sass文件转换为.css文件</code><br> css-loader：将<code>.css文件的内容转化为js字符串</code><br> style-loader：动态创建<code>&lt;style&gt;</code>标签，将转化的字符放入&lt;style&gt;标签中</p>
</li>
<li><p>创建src/scss/base.scss文件<br> <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e849eaa11ba49499d42961f3d51e568~tplv-k3u1fbpfcp-watermark.image"><br> .scss文件内容<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33f41c78c752485ebb2d4844d26c3634~tplv-k3u1fbpfcp-watermark.image"><br> index.html中添加<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f74173328f746759f61f7160e9bc898~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>在入口文件中，引入.scss文件<br> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/991024b545284d719040e0f55bc38278~tplv-k3u1fbpfcp-watermark.image"><br> .scss文件内容<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6cd7df5e9ad49b98f0974ecb0353972~tplv-k3u1fbpfcp-watermark.image"><br> index.html中添加<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb49c688635445a6be54c2fe51059567~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>执行命令<br> yarn build</p>
</li>
<li><p>页面效果<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04fad7fb512248f59c46dc71e7507436~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
</ol>
<h2 id="样式适配浏览器，自动添加前缀，增强项目兼容性"><a href="#样式适配浏览器，自动添加前缀，增强项目兼容性" class="headerlink" title="样式适配浏览器，自动添加前缀，增强项目兼容性"></a>样式适配浏览器，自动添加前缀，增强项目兼容性</h2><p><strong><code>postcss-loader</code></strong></p>
<ol>
<li><p>下载loader及相关<br> <code>yarn add postcss-loader autoprefixer --dev</code>  </p>
<blockquote>
<p><code>注：autoprefixer是PostCSS插件，可以自动添加所需的带前缀的属性声明。</code><br><code>注：postcss也需要配置browserslist</code></p>
</blockquote>
</li>
<li><p>postcss.config.js(postcss配置文件)</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">	<span class="built_in">module</span>.exports = &#123;</span><br><span class="line">   plugins: [</span><br><span class="line">       <span class="comment">// 引入插件 </span></span><br><span class="line">       <span class="built_in">require</span>(<span class="string">&#x27;autoprefixer&#x27;</span>)</span><br><span class="line">   ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
<li><p>webpack.config.js文件中修改规则<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a54d55a11594ad0910931e93b5dcf39~tplv-k3u1fbpfcp-watermark.image">  </p>
<blockquote>
<p><code>注：postcss-loader将(.less或.scss)转换后的.css文件添加前缀</code></p>
</blockquote>
</li>
<li><p>修改base.css、base.less、base.scss文件(添加带前缀的属性)<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e640732458645a790453b9bc658f28d~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
<li><p>执行命令<br> yarn build</p>
</li>
<li><p>生成代码效果<br> css：<br> <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e07ad8e71074ecf852000fe35c2ddb7~tplv-k3u1fbpfcp-watermark.image"></p>
<p> less：<br> <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/799e1ef4eecc4c52856b6bf49a5cb539~tplv-k3u1fbpfcp-watermark.image"></p>
<p> scss：<br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c06ba33b7d247328e7194fc22e5b407~tplv-k3u1fbpfcp-watermark.image"></p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%89/" data-id="ckjsoehch0002fsr009r20r6b" data-title="Webpack基础配置(三)" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-Webpack基础配置-二" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%BA%8C/" class="article-date">
  <time class="dt-published" datetime="2020-12-20T11:45:16.000Z" itemprop="datePublished">2020-12-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%BA%8C/">Webpack基础配置(二)</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><ul>
<li>问：为什么使用babel?<ul>
<li>webpack只理解ES5语法的js文件，并不理解ES6+的语法及js新的API。</li>
<li>babel可以将ES6+的语法及js新的API转换称ES5语法。</li>
</ul>
</li>
</ul>
<h2 id="下载babel及相关"><a href="#下载babel及相关" class="headerlink" title="下载babel及相关"></a>下载babel及相关</h2><ol>
<li>开发时依赖下载：<br> <code>yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime --dev</code></li>
</ol>
<ol start="2">
<li>运行时依赖：<br> <code>yarn add @babel/runtime-corejs3 core-js@3</code></li>
</ol>
<h2 id="babel-config-js文件-babel配置文件"><a href="#babel-config-js文件-babel配置文件" class="headerlink" title="babel.config.js文件(babel配置文件)"></a>babel.config.js文件(babel配置文件)</h2><p>在项目根目录下创建<code>babel.config.js</code>或<code>.babelrc</code>文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">        [</span><br><span class="line">            <span class="string">&quot;@babel/preset-env&quot;</span></span><br><span class="line">        ]</span><br><span class="line">    ],</span><br><span class="line">    <span class="string">&quot;plugins&quot;</span>: [</span><br><span class="line">        [</span><br><span class="line">            <span class="string">&quot;@babel/plugin-transform-runtime&quot;</span>,</span><br><span class="line">            &#123;</span><br><span class="line">                corejs: &#123;<span class="attr">version</span>: <span class="number">3</span>, <span class="attr">proposals</span>: <span class="literal">true</span>&#125;,</span><br><span class="line">                helpers: <span class="literal">true</span>,</span><br><span class="line">                useESModules: <span class="literal">true</span>,</span><br><span class="line">                regenerator: <span class="literal">true</span>,</span><br><span class="line">                absoluteRuntime: <span class="string">&quot;./node_modules&quot;</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><code>@babel/preset-env：</code>es6 转 es5，翻译JS新的api<br><code>@babel/plugin-transform-runtime：</code>es新特性转换，将转换的代码提共通方法。减小代码量，减小打包大小。</p>
<blockquote>
<p><code>注：配置babel前，需要配置browserslist，我们直接在package.json中设置</code>  </p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&quot;browserslist&quot;: [</span><br><span class="line">  &quot;&gt; 1%&quot;,</span><br><span class="line">  &quot;last 2 versions&quot;,</span><br><span class="line">  <span class="string">&quot;not ie &lt;= 8&quot;</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h2 id="webpack-config-js文件-webpack配置文件"><a href="#webpack-config-js文件-webpack配置文件" class="headerlink" title="webpack.config.js文件(webpack配置文件)"></a>webpack.config.js文件(webpack配置文件)</h2><p>在项目根目录下创建<code>webpack.config.js</code>文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: path.resolve(__dirname, <span class="string">&#x27;src&#x27;</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">        filename: <span class="string">&#x27;main.js&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">                exclude: <span class="regexp">/(node_modules|bower_components)/</span>,</span><br><span class="line">                include: path.resolve(__dirname, <span class="string">&#x27;src&#x27;</span>),</span><br><span class="line">                use: &#123;</span><br><span class="line">                    loader: <span class="string">&#x27;babel-loader&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><code>exclude:</code>排除路径<br><code>include:</code>包含路径</p>
<h2 id="执行yarn-build命令打包，对比生成的前后文件"><a href="#执行yarn-build命令打包，对比生成的前后文件" class="headerlink" title="执行yarn build命令打包，对比生成的前后文件"></a>执行yarn build命令打包，对比生成的前后文件</h2><ul>
<li>使用babel前：<ul>
<li>存在箭头函数、const关键字等es6+语法<br>  <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a0e872f73bc4a8f892825d477e8cff1~tplv-k3u1fbpfcp-watermark.image"></li>
</ul>
</li>
<li>使用babel后：<ul>
<li>ES6+语法转换成为ES5语法<br>  <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e08bd4415074996b84325d229d36a29~tplv-k3u1fbpfcp-watermark.image"></li>
</ul>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%BA%8C/" data-id="ckjsoehcf0001fsr00sgpcwhw" data-title="Webpack基础配置(二)" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-Webpack基础配置-一" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%80/" class="article-date">
  <time class="dt-published" datetime="2020-12-20T11:23:44.000Z" itemprop="datePublished">2020-12-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%80/">Webpack基础配置(一)</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="初始化node项目"><a href="#初始化node项目" class="headerlink" title="初始化node项目"></a>初始化node项目</h2><p>执行命令：<code>yarn init -y</code>并生成package.json文件</p>
<h2 id="下载webpack"><a href="#下载webpack" class="headerlink" title="下载webpack"></a>下载webpack</h2><p>执行命令：<code>yarn add webpack webpack-cli --dev</code></p>
<h2 id="在项目根目录创建src文件夹"><a href="#在项目根目录创建src文件夹" class="headerlink" title="在项目根目录创建src文件夹"></a>在项目根目录创建src文件夹</h2><p>目录结构如图：<br><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee13d6e638df40819fc87eb4bfa7d70f~tplv-k3u1fbpfcp-watermark.image"></p>
<p>文件内容如图：<br><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2117544a9a3440f491bb1e41bdd5e64c~tplv-k3u1fbpfcp-watermark.image"><br><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f43a5ff9494404fac63d2ae699249d6~tplv-k3u1fbpfcp-watermark.image"><br><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f17ab599d07409dbb534ffc90a30b35~tplv-k3u1fbpfcp-watermark.image"></p>
<blockquote>
<p><code>注：webpack默认支持AMD、CMD、commonJS、ES6方式模块的导入导出。</code></p>
</blockquote>
<h2 id="webpack命令"><a href="#webpack命令" class="headerlink" title="webpack命令"></a>webpack命令</h2><p>直接在终端执行webpack命令，都是<code>全局命令</code>。</p>
<p>在项目根目录下，执行<code>.\node_modules\.bin\webpack</code>命令才是<code>局部命令</code>;<br>或者在<code>package.json的scripts属性</code>中配置的webpack命令也是<code>局部命令</code>。</p>
<p>如图：<br><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4744ca9adddf4b01a59d8cad482bed90~tplv-k3u1fbpfcp-watermark.image"></p>
<h2 id="使用webpack命令"><a href="#使用webpack命令" class="headerlink" title="使用webpack命令"></a>使用webpack命令</h2><p>在终端执行  .\node_modules.bin\webpack 或者 yarn build命令</p>
<p>webpack默认会在项目根目录下查找<code>weboack.config.js</code>文件，<br>没有weboack.config.js文件则直接将src/index.js当作<code>入口文件</code>进行打包。</p>
<h2 id="输出文件"><a href="#输出文件" class="headerlink" title="输出文件"></a>输出文件</h2><p>执行命令后，会在项目根目录下生成dist目录<br><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afa4d06314c845c09bff448cb3a22293~tplv-k3u1fbpfcp-watermark.image"></p>
<h2 id="使用生成文件"><a href="#使用生成文件" class="headerlink" title="使用生成文件"></a>使用生成文件</h2><p>在src目录下创建idnex.html文件，并且引用生成的文件<br><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab8ea0a604284528801b130bca414c29~tplv-k3u1fbpfcp-watermark.image"></p>
<p>发布页面后，查看运行结果<br><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/028eb19aea04492790ae90a185a12111~tplv-k3u1fbpfcp-watermark.image"></p>
<h2 id="链接"><a href="#链接" class="headerlink" title="链接"></a>链接</h2><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6906486131920125959">下一篇 Webpack基础配置(二)</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%80/" data-id="ckjsoehcb0000fsr0bpu59dhq" data-title="Webpack基础配置(一)" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">January 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">December 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/01/11/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E5%9B%9B/">Webpack基础配置(四)</a>
          </li>
        
          <li>
            <a href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%89/">Webpack基础配置(三)</a>
          </li>
        
          <li>
            <a href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%BA%8C/">Webpack基础配置(二)</a>
          </li>
        
          <li>
            <a href="/2020/12/20/Webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-%E4%B8%80/">Webpack基础配置(一)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2021 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/js/jquery-3.4.1.min.js"></script>



  
<script src="/fancybox/jquery.fancybox.min.js"></script>




<script src="/js/script.js"></script>





  </div>
</body>
</html>